<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工信息</title>
    <link rel="stylesheet" href="/css/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="3">
            <el-input v-model="searchForm.empName" placeholder="请输入员工姓名"></el-input>
        </el-col>
        <el-col :span="2">
            <el-select v-model="searchForm.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
            </el-select>
        </el-col>
        <el-col :span="3">
            <el-input v-model="searchForm.address" placeholder="请输入员工地址"></el-input>
        </el-col>
        <el-col :span="3">
            <el-input type="hidden" v-model="searchForm.status"></el-input>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button type="primary" icon="el-icon-circle-plus" @click="handlerAdd">添加</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="refresh">刷新</el-button>
        </el-col>

        <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <!--表格数据  : 相当于v-bind: -->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="头像"
                width="50">
            　<template slot-scope="scope">
                <el-image
                    style="width: 50px; height: 50px"
                    :src="scope.row.empImg">
                </el-image>
            </template>
        </el-table-column>
        <el-table-column
                prop="empId"
                label="员工编号"
                width="40">
        </el-table-column>

        <el-table-column
                prop="empName"
                label="员工姓名"
                width="70">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
                width="40">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="40">
        </el-table-column>
        <el-table-column
                prop="idcard"
                label="身份证号"
                width="165">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="60">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话"
                width="120">
        </el-table-column>
        <el-table-column
                prop="hireDate"
                label="入职日期"
                width="100">
        </el-table-column>
        <el-table-column
                prop="roleName"
                label="职位"
                width="70">
        </el-table-column>
        <el-table-column
                prop="deptName"
                label="部门"
                width="70">
        </el-table-column>
        <el-table-column
                prop="storesName"
                label="店铺"
                width="70">
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态"
                :formatter="getStatus"
                width="40">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="info"
                        @click="handleFlat(scope.$index, scope.row)">平调</el-button>
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleFire(scope.$index, scope.row)">解雇</el-button>
                <el-button
                        size="mini"
                        type="warning"
                        @click="handleFreeze(scope.$index, scope.row)">{{freeze}}</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2,3,5,10,15,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--员工添加对话框-->
    <el-dialog title="添加员工" :visible.sync="dialogAddFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="员工姓名" prop="empName" :label-width="formLabelWidth">
                <el-input v-model="form.empName" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="头像上传" prop="empImg" :label-width="formLabelWidth">
                &lt;!&ndash;图片上传&ndash;&gt;
                <el-upload
                        class="avatar-uploader"
                        action="/emp/uploadUserHeadPic"
                        name="empImg"
                        :auto-upload='true'
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

            </el-form-item>
            <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
                <el-radio-group v-model="form.sex">
                    <el-radio label="男" size="mini"></el-radio>
                    <el-radio label="女" size="mini"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄"  prop="age" :label-width="formLabelWidth">
                <el-input v-model="form.age" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="身份证号"  prop="idcard" :label-width="formLabelWidth">
                <el-input v-model="form.idcard" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="地址"  prop="address" :label-width="formLabelWidth">
                <el-input v-model="form.address" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="电话"  prop="phone" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="入职日期" prop="hireDate" :label-width="formLabelWidth">
                <el-date-picker type="date" size="mini" v-model="form.hireDate" autocomplete="off" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="所属部门" prop="deptId" :label-width="formLabelWidth">
                <el-select v-model="form.deptId" placeholder="请选择">
                    <el-option
                            v-for="item in optionsA"
                            :key="item.deptId"
                            :label="item.deptName"
                            :value="item.deptId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择职位" prop="roleId" :label-width="formLabelWidth">
                <el-select v-model="form.roleId" placeholder="请选择">
                    <el-option
                            v-for="item in optionsB"
                            :key="item.roleId"
                            :label="item.roleName"
                            :value="item.roleId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属门店" prop="storesId" :label-width="formLabelWidth">
                <el-select v-model="form.storesId" placeholder="请选择">
                    <el-option
                            v-for="item in optionsC"
                            :key="item.storesId"
                            :label="item.storesName"
                            :value="item.storesId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
                <el-input v-model="form.username" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
                <el-input type="password" v-model="form.password" size="mini"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddFormVisible = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="submitAddForm('form')" size="mini">确 定</el-button>
        </div>
    </el-dialog>

    <!--员工修改对话框-->
    <el-dialog :title="title" :visible.sync="dialogUpdateFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="员工姓名" prop="empName" :label-width="formLabelWidth">
                <el-input v-model="form.empName" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="empImg" :label-width="formLabelWidth">
                <el-image v-if="(form.empImg==''||form.empImg==null)?false:true"
                          style="width: 100px; height: 100px"
                          :src="form.empImg"
                ></el-image>
                <el-upload
                        class="avatar-uploader"
                        action="/emp/uploadUserHeadPic"
                        name="empImg"
                        :auto-upload='true'
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="性别" prop="sex" :label-width="formLabelWidth">
                <el-radio-group v-model="form.sex">
                    <el-radio label="男" size="mini"></el-radio>
                    <el-radio label="女" size="mini"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄"  prop="age" :label-width="formLabelWidth">
                <el-input v-model="form.age" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="身份证号"  prop="idcard" :label-width="formLabelWidth">
                <el-input v-model="form.idcard" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="地址"  prop="address" :label-width="formLabelWidth">
                <el-input v-model="form.address" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="电话"  prop="phone" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off" size="mini"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUpdateFormVisible = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="submitUpdateForm('form')" size="mini">确 定</el-button>
        </div>
    </el-dialog>

    <!--员工平调对话框-->
    <el-dialog :title="title" :visible.sync="dialogFlatFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="平调员工" prop="empName" :label-width="formLabelWidth">
                <el-input v-model="form.empName" size="mini" readonly="true"></el-input>
            </el-form-item>

            <el-form-item label="所属部门" prop="deptId" :label-width="formLabelWidth">
                    <el-input v-model="form.deptName" size="mini" readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="所属职位" prop="roleId" :label-width="formLabelWidth">
                <el-input v-model="form.roleName" size="mini" readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="所属门店" prop="storesId" :label-width="formLabelWidth">
                <el-input v-model="form.storesName" size="mini" readonly="true"></el-input>
            </el-form-item>

            <el-form-item label="平调日期" prop="empFlatDate" :label-width="formLabelWidth">
                <el-date-picker type="date" size="mini" v-model="form.empFlatDate" autocomplete="off" style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="平调部门" prop="flatDeptName" :label-width="formLabelWidth">
                <el-select v-model="form.flatDeptName" placeholder="请选择">
                    <el-option
                            v-for="item in optionsA"
                            :key="item.deptId"
                            :label="item.flatDeptName"
                            :value="item.deptName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="平调职位" prop="flatRoleName" :label-width="formLabelWidth">
                <el-select v-model="form.flatRoleName" placeholder="请选择">
                    <el-option
                            v-for="item in optionsB"
                            :key="item.roleId"
                            :label="item.flatRoleName"
                            :value="item.roleName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="平调门店" prop="flatStoresName" :label-width="formLabelWidth">
                <el-select v-model="form.flatStoresName" placeholder="请选择">
                    <el-option
                            v-for="item in optionsC"
                            :key="item.storesId"
                            :label="item.flatStoresName"
                            :value="item.storesName">
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFlatForm('form')" size="mini">提交审核</el-button>
        </div>
    </el-dialog>
</div>
<!--引入vue-->
<script src="/js/vue.js"></script>
<!-- 引入组件element-ui库 -->
<script src="/js/index.js"></script>
<!--引入axios库-->
<script src="/js/axios.min.js"></script>

<script>
    var app =new Vue({
        el:"#app",
        /* data:{

         }*/
        data:function () {
            return{
                optionsA: [],//部门集合 页面初始化时，动态获取
                optionsB:[],// 职位/角色集合
                optionsC:[],// 店铺集合
                tableData:[],
                currentPage:1,
                freeze:'冻结',
                pageSize: 5,
                total:100,
                searchForm:{empName:'',sex:'',address:'',status:'1'},
                dialogAddFormVisible: false, //是否显示对话框  默认是不显示
                dialogUpdateFormVisible: false, //是否显示对话框  默认是不显示
                dialogFlatFormVisible: false, //是否显示对话框  默认是不显示
                form:{empName:'',sex:'',age:'',idcard:'',address:'',phone:'',status:'1',deptName:'',roleName:'',storesName:'',empImg:'',flatDeptName:'',flatRoleName:'',flatStoresName:''},//form表单对象
                formLabelWidth: '120px',
                imageUrl:'',
                rules: {
                    empName: [
                        { required: true, message: '请输入员工姓名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ] ,
                    sex:[
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    age:[
                        { required: true, message: '年龄不能为空',trigger: 'blur'}
                    ],
                    /*idcard:[
                        { required: true, message: '请输入员工身份证号', trigger: 'blur' },
                        { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' }
                    ],*/
                    address: [
                        { required: true, message: '请输入员工地址', trigger: 'blur' },
                        { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                    ],
                    /*phone: [
                        { required: true, message: '请输入员工电话', trigger: 'blur' },
                        { min: 8, max: 11, message: '长度在 8 到 11 个字符', trigger: 'blur' }
                    ],*/
                    hireDate: [
                        { type: 'date', required: true, message: '请选择入职日期', trigger: 'blur' }
                    ],
                    roleId: [
                        { required: true, message: '请选择职位', trigger: 'change' }
                    ],
                    deptId: [
                        { required: true, message: '请选择部门', trigger: 'change' }
                    ],
                   /* storesId: [
                        { required: true, message: '请选择店铺', trigger: 'change' }
                    ]*/
                }
            }
        },
        created:function () { //初始化方法 类似于jquery  $({})
            this.loadData();
            //让_this等于当前vue对象
            var _this = this;
            //加载添加的部门下拉数据
            axios.get('/dept/listAll')  //指定请求的url及参数  get
                .then(function (response) {  //正确返回对象的处理
                    //JSON.stringify   把json转换为json字符串，方便查看
                    console.log(JSON.stringify(response));
                    //判断返回值是否正确
                    if(response.data.code==200){
                        _this.optionsA = response.data.data;
                    }
                })
            //加载添加的职位下拉数据
            axios.get('/role/listAll')  //指定请求的url及参数  get
                .then(function (response) {  //正确返回对象的处理
                    //JSON.stringify   把json转换为json字符串，方便查看
                    console.log(JSON.stringify(response));
                    //判断返回值是否正确
                    if(response.data.code==200){
                        _this.optionsB = response.data.data;
                    }

                })
            axios.get('/stores/listAll2')  //指定请求的url及参数  get
                .then(function (response) {  //正确返回对象的处理
                    //JSON.stringify   把json转换为json字符串，方便查看
                    console.log(JSON.stringify(response));
                    //alert(JSON.stringify(response));
                    //判断返回值是否正确
                    if(response.data.code==200){
                        _this.optionsC = response.data.data;
                    }
                })
        },
        methods:{
            loadData(){
                //让_this等于当前vue对象
                var _this = this;
                //赋值 axios官网代码
                axios.post('/emp/listByParam',{pageNum:this.currentPage,pageSize:this.pageSize,data:this.searchForm})  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        // handle success
                        console.log(response);
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        if(response.data.code==200){
                            _this.tableData = response.data.data.list;
                            _this.total = response.data.data.total;
                        }

                    })
                    .catch(function (error) {//错误的处理
                        // handle error
                        console.log(error);
                    })
                    .then(function () {//总执行 最终处理      类似java  异常处理的finally
                        // always executed
                    });
            },
            refresh(){
                location.reload();
            },
            //每页数量发生变化执行方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                //再次请求，加载数据
                this.loadData();
            },
            //获取部门状态  把状态数字，转换为字符
            getStatus(row, column, cellValue, index){
                //return cellValue==1?"在职":"离职";
                if(cellValue==1){
                    return "在职";
                }else if(cellValue==2){
                    return "离职";
                }else if(cellValue==3){
                    return "冻结";
                }
            },
            //当前页发生变化时执行方法
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);

                this.currentPage =val;
                //再次请求，加载数据
                this.loadData();
            },
            search(){
                this.loadData();
            },
            //处理添加
            handlerAdd(){
                //显示对话框
                this.dialogAddFormVisible=true;
                //让form表单重新赋空值
                this.form={};
            },
            //处理更新
            handleEdit(index, row) {
                //row  当前行数据 如果是第一行  row = {deptId:1,deptName:'管理部',description:'店长的事',status:1}
                console.log(index, row);
                this.title="修改员工";
                //显示对话框
                this.dialogUpdateFormVisible=true;
                //把一行数据赋值给form赋值
                this.form = row;
            },
            //处理平调
            handleFlat(index, row) {
                //row  当前行数据 如果是第一行  row = {deptId:1,deptName:'管理部',description:'店长的事',status:1}
                console.log(index, row);
                this.title="平调员工";
                //显示对话框
                this.dialogFlatFormVisible=true;
                //把一行数据赋值给form赋值
                this.form = row;
            },
            //处理解雇
            handleFire(index, row) {
                console.log(index, row);
                //alert(row.status);
                //确认框提示
                this.$confirm('确定要解雇该名员工吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //让_this等于当前vue对象
                    var _this = this;
                     //alert(111);
                    //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                    axios.post("/emp/updateFire",row)  //指定请求的url及参数  get
                        .then(function (response) {  //正确返回对象的处理
                            // handle success
                            console.log(response);
                            //JSON.stringify   把json转换为json字符串，方便查看
                            console.log(JSON.stringify(response));
                            //直接使用this 会指 axios对象  错误
                            // this.tableData
                            //判断返回值是否正确
                            if(response.data.code==200){
                                //提示添加成功
                                _this.$message({
                                    message: '恭喜你，这是一条成功消息',
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                            }else {
                                //错误提示信息
                                _this.$message.error('错了哦，这是一条错误消息');
                            }

                        })
                        .catch(function (error) {//错误的处理
                            // handle error
                            console.log(error);
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消解雇'
                    });
                });
            },
            //提交员工添加表单 submitAddForm('form')
            submitAddForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        //让_this等于当前vue对象
                        var _this = this;
                        // alert(111);
                        //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                        axios.post('/emp/insert',this.form)  //指定请求的url及参数  get
                            .then(function (response) {  //正确返回对象的处理
                                // handle success
                                console.log(response);
                                //JSON.stringify   把json转换为json字符串，方便查看
                                console.log(JSON.stringify(response));
                                //直接使用this 会指 axios对象  错误
                                // this.tableData
                                //判断返回值是否正确
                                if(response.data.code==200){
                                    //alert(123);
                                    //关闭弹框
                                    _this.dialogAddFormVisible=false;
                                    //提示添加成功
                                    _this.$message({
                                        message: '恭喜你，这是一条成功消息',
                                        type: 'success'
                                    });
                                    //重新加载数据
                                    _this.loadData();
                                }else {
                                    //错误提示信息
                                    _this.$message.error('错了哦，这是一条错误消息');
                                }

                            })
                            .catch(function (error) {//错误的处理
                                // handle error
                                console.log(error);
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //提交员工编辑表单 submitUpdateForm('form')
            submitUpdateForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //alert(this.title);
                        var aaa=this.title;
                        //让_this等于当前vue对象
                        var _this = this;
                        // alert(111);
                        //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                        axios.post('/emp/update',this.form)  //指定请求的url及参数  get
                            .then(function (response) {  //正确返回对象的处理
                                // handle success
                                console.log(response);
                                //JSON.stringify   把json转换为json字符串，方便查看
                                console.log(JSON.stringify(response));
                                //直接使用this 会指 axios对象  错误
                                // this.tableData
                                //判断返回值是否正确
                                if(response.data.code==200){
                                    //alert(aaa);
                                    //关闭弹框
                                        _this.dialogUpdateFormVisible=false;
                                    //提示添加成功
                                    _this.$message({
                                        message: '恭喜你，这是一条成功消息',
                                        type: 'success'
                                    });
                                    //重新加载数据
                                    _this.loadData();
                                }else {
                                    //错误提示信息
                                    _this.$message.error('错了哦，这是一条错误消息');
                                }

                            })
                            .catch(function (error) {//错误的处理
                                // handle error
                                console.log(error);
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //提交员工平调表单 submitFlatForm('form')
            submitFlatForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        //让_this等于当前vue对象
                        var _this = this;
                        // alert(111);
                        //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                        axios.post('/emp/insertFlat',this.form)  //指定请求的url及参数  get
                            .then(function (response) {  //正确返回对象的处理
                                // handle success
                                console.log(response);
                                //JSON.stringify   把json转换为json字符串，方便查看
                                console.log(JSON.stringify(response));
                                //直接使用this 会指 axios对象  错误
                                // this.tableData
                                //判断返回值是否正确
                                if(response.data.code==200){
                                    //alert(123);
                                    //关闭弹框
                                    _this.dialogFlatFormVisible=false;
                                    //提示添加成功
                                    _this.$message({
                                        message: '恭喜你，这是一条成功消息',
                                        type: 'success'
                                    });
                                    //重新加载数据
                                    _this.loadData();
                                }else {
                                    //错误提示信息
                                    _this.$message.error('错了哦，这是一条错误消息');
                                }

                            })
                            .catch(function (error) {//错误的处理
                                // handle error
                                console.log(error);
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //图片上传成功后
            handleAvatarSuccess:function(res, file) {
                //图片回显
                this.imageUrl = URL.createObjectURL(file.raw);
                //   alert(file.response);
                 //alert(JSON.stringify(file.response));
                this.form.empImg=file.response.data;

                // this.form.fileName=file.response.oldFileName;
                // this.form.filePath=file.response.newFilePath;
            },
            //上传前图片类型和大小判断
            beforeAvatarUpload:function(file) {
                // const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                /* if (!isJPG) {
                     this.$message.error('上传头像图片只能是 JPG 格式!');
                 }*/
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return  isLt2M;
            },
            // 处理冻结
            handleFreeze(index, row) {
                    console.log(index, row);
                    //alert(row.status);
                        //确认框提示
                        this.$confirm('确定要冻结该名员工的账号吗?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {

                            //让_this等于当前vue对象
                            var _this = this;
                            //alert(111);
                            //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                            axios.post("/emp/updateFreeze",row)  //指定请求的url及参数  get
                                .then(function (response) {  //正确返回对象的处理
                                    // handle success
                                    console.log(response);
                                    //JSON.stringify   把json转换为json字符串，方便查看
                                    console.log(JSON.stringify(response));
                                    //直接使用this 会指 axios对象  错误
                                    // this.tableData
                                    //判断返回值是否正确
                                    if(response.data.code==200){
                                        //提示添加成功
                                        _this.$message({
                                            message: '恭喜你，这是一条成功消息',
                                            type: 'success'
                                        });
                                        //重新加载数据
                                        _this.loadData();
                                    }else {
                                        //错误提示信息
                                        _this.$message.error('错了哦，这是一条错误消息');
                                    }

                                })
                                .catch(function (error) {//错误的处理
                                    // handle error
                                    console.log(error);
                                })

                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消冻结'
                            });
                        });
            }

        }
    })
</script>
</body>
</html>